<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>最新优惠券|麦当劳中国</title>
	<style type="text/css">
		*{
		margin: 0;
		padding: 0;
	}
	li{
		list-style: none;
	}
		.inner-warp{
		position: fixed;
		top:0; 
		left: 0;
		width: 100%;
		height:120px;
    	border-bottom: 1px solid #d9d9d9;
    	background-color: #fff;
    	z-index: 99999;
	}
    .inner ul{
		list-style: none;
    }
	.inner ul li{
		float: left;
		display: inline-block;
		width: 20% !important;
		height:120px;
		line-height: 120px;
		text-align: center;

	}
	.inner>li>a{
		width: 70px;
		height:60px;
		margin-right: 90px;
		display: block;
	}
	.main-nav{
		display: inline-block;
		width: 930px;
		height:120px;
	}
		.box1{
			position: relative;
			width: 100%;
			padding: 150px 0 90px 0;
		}
		.box2{
			position: relative;
			height: 340px;
			max-width: 1120px;
			margin: 0 auto;
			overflow: hidden;
		}
		.box3{
			display: block;
			position: absolute;
			width: 100%;
  	        height: 100%
  	        left: -200%;
  	        top: 0;
		}
		.box3 img{
			display: block;
			height: 100%;
			width: auto;
			margin: 0 auto;
		}
        .box4{
			position: relative;
			margin: 0 auto;
			background-color: #f7f7f7;
			max-width: 1120px;
			padding-top: 40px;
		}
		.box5{
			color: #2d2d2d;
			font-size: 12px;
		}
		.box6{
			width: 100%;
			max-width: 645px;
			margin: 0 auto;
			padding-bottom: 100px;
		}
		.section-content{
			flex-direction: row-reverse;
			display: flex;
			align-items: center;
			height: auto;
			border-bottom: 1px  solid rgb(0,0,0,0.1);
			position: relative;
			padding: 35px 0;
		}
		.image{
			position: relative;
			width: 60%;
			display: flex;
			justify-content: center;
		}
		.text{
			width: 88%;
			padding-left: 30px;
			padding-right: 30px;
			text-align: center;
		}
		.text h3{
			margin-bottom: .5em;
			font-size: 28px;
			color: #2d2d2d;
		}
		.text p{
			font-size: 14px;
			line-height: 22px;
			color: #2d2d2d;
		}
		.container-fuild{
			margin-right: auto;
			margin-left: auto;
			position: relative;
			width: 100%;
			padding: 70px 0 70px 0;
			background: url(footer-bg.jpg);
		}
		.footer-bg{
			background:#ffbc0d;
			padding: 40px 15px 50px 15px;
		}
		.inner{
			position: relative;
			width: 100%;
			max-width: 1120px;
			margin: 0 auto;
			padding: 0;
		}
		.description{
		line-height: 18px;
		}
		.mcd{
			display: inline-block;
			vertical-align: top;
			font-size: 12px;
			margin-right: 40px;
		}
		.icp{
			display: inline-block;
			vertical-align: top;
			margin-right: 40px;
		}
        .icp a{
        	font-size: 12px;
        	padding-left: none;
        	display: inline-block;
        	color: #2d2d2d;
        	text-decoration: none;
        }
        .follow-us{
        	display: inline-block;
        	padding-left: none;
        	font-size: 12px;
        }
        .follow-us img{
        	height: 25px;
        	width: 35px;
        }
        .normal{
        	color: #2d2d2d;
        	text-decoration: none;
        	
        }
        .span{
        	color: #2d2d2d;
        	text-decoration: none;
        }
        .back{
        	display: inline-block;
        	position: absolute;
        	top: 50%;
        	text-align: right;
        	font-size: 14px;
        	right: 0;
        }
        .back a{
        	text-decoration: none;
        	color: #2d2d2d;
        }
        .back img{
        	height: 40px;
        	width: 45px;
        }
	</style>
</head>
<header class="">
		<div class="inner-warp">
			<div class="inner">
				<div class="main-nav">
					<ul>
						<li>
							<a href=""><img src="logo.png"alt=""></a>
						</li>
						<li><img src="maidanglao.png" alt=""></li>
						<li><img src="meiweishike.png" alt=""></li>
						<li><img src="qinzihuodong.png" alt=""></li>
						<li><img src="yingyangpinzhi.png" alt=""></li>
					</ul>
				</div>
			</div>
		</div>
	</header>
<body>
	
	<div class="box1">
		<div class="box2">
			<div class="box3">
				<img src="cover.jpg">
			</div>
		</div>
		<div class="box4">
				<div class="box5">
					<div class="box6">
						<section class="section-content">
							<div class="image">
							       <img src="职员1.png">
						    </div>
						    <div class="text">
							       <h3>成为麦当劳会员</h3>
							       <p>加入麦当劳会员，积分换取超多优惠券。</p>
						    </div>
						</section>
						<section class="section-content">
						    <div class="text">
							       <h3>嗨翻星期一</h3>
							       <p>加入麦当劳会员，每周会员日领取柜台、甜品站、麦咖啡和麦乐送会员专享优惠券。</p>
						    </div>
						    <div class="image">
							       <img src="职员2.png">
						    </div>
						</section>
						<section class="section-content">
							<div class="image">
							       <img src="职员3.png">
						    </div>
						    <div class="text">
							       <h3>关注麦当劳官方品平台</h3>
							       <p>关注麦当劳微信公众号、支付宝生活号及i麦当劳小程序，查看你的专享优惠券。</p>
						    </div>
						</section>
					</div>
				</div>
			</div>
	</div>
	<footer class="container-fuild">
		<div class="footer-bg">
			<div class="inner">
				<div class="descrption">
					<div class="logo">
							<a href=""><img src="QQ图片20200327173319.png" alt=""></a>
					</div>
					<div>
						<p class="mcd">©2020 McDONALD'S.ALL Rights Reserved</p>
						<p class="icp">
							<a style="background:none;padding-left: 0" href="http://www.beian.miit.gov.cn" target="_blank">沪ICP备06017533号
							</a>
							<a href="http://www.beian.miit.gov.cn" target="_blank">沪公网安备 31010402000846号
							</a>
							<br>
							<a style="background:none;padding-left: 0" href="http://www.beian.miit.gov.cn">预付卡信息对接唯一标识：310104H6212160100397</a>
						</p>
						<p class="follow-us">
							<a class="normal" href="">隐私政策</a>
							<a class="normal" href="">使用条款</a>
							<a class="normal" href="">会员协议</a><br>
							<a class="normal" href="">联系我们</a>
							<span>关注我们</span>
							<a class="normal" href=""><img src="weixin.png"></a>
							<a class="normal" href=""><img src="weibo.png"></a>
						</p>
						<div class="back">
							<a href="">回到顶部</a>
							<img src="back.png">
						</div>
					</div>
				</div>
			</div>
		</div>
	</footer>
</body>
</html>